<template>
  <div class="p-6 space-y-8">
    <div class="bg-white rounded-lg shadow-sm p-6">
      <h3 class="text-xl font-semibold mb-6 text-gray-800 border-b border-gray-200 pb-3">个人基本情况</h3>
      <n-descriptions label-placement="left" bordered :column="4" size="medium" class="custom-descriptions">

        <n-descriptions-item label="姓名">
          <div class="flex items-center gap-1.5">
            <n-tooltip v-if="getBasicValidationInfo('memberName')" trigger="hover">
              <template #trigger>
                <n-icon :size="16" :color="getLevelColor(getBasicValidationInfo('memberName').level)">
                  <component :is="getIconComponent(getBasicValidationInfo('memberName').level)" />
                </n-icon>
              </template>
              <span>{{ getBasicValidationInfo('memberName').message }}</span>
            </n-tooltip>
            <span>{{ member.memberName || '未填写' }}</span>
          </div>
        </n-descriptions-item>

        <n-descriptions-item label="性别">
          <div class="flex items-center gap-1.5">
            <n-tooltip v-if="getBasicValidationInfo('genderType')" trigger="hover">
              <template #trigger>
                <n-icon :size="16" :color="getLevelColor(getBasicValidationInfo('genderType').level)">
                  <component :is="getIconComponent(getBasicValidationInfo('genderType').level)" />
                </n-icon>
              </template>
              <span>{{ getBasicValidationInfo('genderType').message }}</span>
            </n-tooltip>
            <span>{{ member.genderType || '未填写' }}</span>
          </div>
        </n-descriptions-item>

        <n-descriptions-item label="民族">{{ member.nationalityDesc || '未填写' }}</n-descriptions-item>

        <n-descriptions-item label="出生日期">
          <div class="flex items-center gap-1.5">
            <n-tooltip v-if="getBasicValidationInfo('birthDate')" trigger="hover">
              <template #trigger>
                <n-icon :size="16" :color="getLevelColor(getBasicValidationInfo('birthDate').level)">
                  <component :is="getIconComponent(getBasicValidationInfo('birthDate').level)" />
                </n-icon>
              </template>
              <span>{{ getBasicValidationInfo('birthDate').message }}</span>
            </n-tooltip>
            <span>{{ formatDate(member.birthDate) || '未填写' }}</span>
          </div>
        </n-descriptions-item>

        <n-descriptions-item label="身份证号">
          <div class="flex items-center gap-1.5">
            <n-tooltip v-if="getBasicValidationInfo('idCardNumber')" trigger="hover">
              <template #trigger>
                <n-icon :size="16" :color="getLevelColor(getBasicValidationInfo('idCardNumber').level)">
                  <component :is="getIconComponent(getBasicValidationInfo('idCardNumber').level)" />
                </n-icon>
              </template>
              <span>{{ getBasicValidationInfo('idCardNumber').message }}</span>
            </n-tooltip>
            <span>{{ member.idCardNumber || '未填写' }}</span>
          </div>
        </n-descriptions-item>

        <n-descriptions-item label="籍贯">{{ member.birthPlace || '未填写' }}</n-descriptions-item>
        <n-descriptions-item label="户口所在地" :span="2">{{ member.residenceLocation || '未填写' }}</n-descriptions-item>
        <n-descriptions-item label="学号">{{ member.studentId || '未填写' }}</n-descriptions-item>
        <n-descriptions-item label="班级">{{ member.studentClass || '未填写' }}</n-descriptions-item>
        <n-descriptions-item label="专业" :span="2">{{ member.majorField || '未填写' }}</n-descriptions-item>
        <n-descriptions-item label="入学年月">{{ formatDate(member.enrollmentDate) || '未填写' }}</n-descriptions-item>
        <n-descriptions-item label="毕业年月">{{ formatDate(member.graduationDate) || '未填写' }}</n-descriptions-item>
        <n-descriptions-item label="手机号">{{ member.phoneNumber || '未填写' }}</n-descriptions-item>
        <n-descriptions-item label="QQ号">{{ member.qqNumber || '未填写' }}</n-descriptions-item>
        <n-descriptions-item label="政治面貌">{{ member.politicalStatus || '未填写' }}</n-descriptions-item>
        <n-descriptions-item label="入团时间">{{ formatDate(member.joinLeagueDate) || '未填写' }}</n-descriptions-item>
        <n-descriptions-item label="当前所在党支部" :span="2">{{ member.currentPartyBranch || '未填写' }}</n-descriptions-item>
        <n-descriptions-item label="备注" :span="4">
          {{ member.memberRemarks || '无' }}
        </n-descriptions-item>
      </n-descriptions>
    </div>

    <div class="bg-white rounded-lg shadow-sm p-6">
      <div class="flex items-center gap-2 mb-6">
        <h4 class="text-lg font-semibold text-gray-800 border-b border-gray-200 pb-3 flex-1">党支部历史情况</h4>
        <n-tooltip v-if="getPartyBranchGeneralValidation()" trigger="hover">
          <template #trigger>
            <n-icon :size="18" :color="getLevelColor(getPartyBranchGeneralValidation().level)">
              <component :is="getIconComponent(getPartyBranchGeneralValidation().level)" />
            </n-icon>
          </template>
          <span>{{ getPartyBranchGeneralValidation().message }}</span>
        </n-tooltip>
      </div>
      <n-data-table
        :columns="partyBranchColumns"
        :data="member.partyBranchHistory || []"
        :bordered="false"
        :single-line="false"
        :pagination="{ pageSize: 5 }"
        :theme-overrides="tableThemeOverrides"
        class="custom-table"
      />
    </div>

    <div class="bg-white rounded-lg shadow-sm p-6">
      <h4 class="text-lg font-semibold mb-6 text-gray-800 border-b border-gray-200 pb-3">参与相关志愿活动情况</h4>
      <n-data-table
        :columns="volunteerColumns"
        :data="member.volunteerActivities || []"
        :bordered="false"
        :single-line="false"
        :pagination="{ pageSize: 5 }"
        :theme-overrides="tableThemeOverrides"
        class="custom-table"
      />
    </div>

    <div class="bg-white rounded-lg shadow-sm p-6">
      <h4 class="text-lg font-semibold mb-6 text-gray-800 border-b border-gray-200 pb-3">所获奖项</h4>
      <n-data-table
        :columns="awardColumns"
        :data="member.awardsReceived || []"
        :bordered="false"
        :single-line="false"
        :pagination="{ pageSize: 5 }"
        :theme-overrides="tableThemeOverrides"
        class="custom-table"
      />
    </div>
  </div>
</template>

<script setup>
import { h } from 'vue'
import {
  NDescriptions,
  NDescriptionsItem,
  NDataTable,
  NIcon,
  NTooltip
} from 'naive-ui'

import { formatDate } from '@/utils/dateUtils'
import { getLevelColor, getIconComponent } from '@/utils/levelUtils'

const props = defineProps({
  member: {
    type: Object,
    default: () => ({})
  },
  basicInfo: {
    type: Array,
    default: () => []
  },
  partyBranchHistory: {
    type: Array,
    default: () => []
  }
})

// 获取基本信息验证结果
function getBasicValidationInfo(key) {
  if (!props.basicInfo || !Array.isArray(props.basicInfo)) {
    return null
  }
  return props.basicInfo.find(item => item.key === key)
}

// 获取党支部历史总体验证结果（索引0）
function getPartyBranchGeneralValidation() {
  if (!props.partyBranchHistory || !Array.isArray(props.partyBranchHistory) || props.partyBranchHistory.length === 0) {
    return null
  }
  return props.partyBranchHistory[0]
}

// 获取特定党支部记录的验证结果
function getPartyBranchRecordValidation(recordIndex) {
  if (!props.partyBranchHistory || !Array.isArray(props.partyBranchHistory)) {
    return null
  }
  // 从索引1开始查找对应记录的验证信息
  const targetKey = `partyBranchHistory[${recordIndex}]`
  return props.partyBranchHistory.find(item => item.key === targetKey)
}

// 表格主题配置
const tableThemeOverrides = {
  empty: { padding: '32px', fontSize: '14px' },
  th: { padding: '16px 12px' },
  td: { padding: '12px' }
}

// 党支部历史表格列定义（带验证提示）
const partyBranchColumns = [
  {
    title: '序号',
    key: 'index',
    width: 80,
    render: (row, index) => index + 1
  },
  // 新增的“核验情况”列
   {
    title: '核验情况',
    key: 'validationStatus',
    width: 220, // 宽度需要适当加宽以容纳文字
    render: (row, index) => {
      // [修复] 表格的行索引(index)从0开始，对应验证信息的索引是 index + 1
      const validation = props.partyBranchHistory[index + 1];

      // 如果没有对应的验证信息，则不渲染任何内容
      if (!validation) return null;

      // 使用一个 div 作为 flex 容器，包裹图标和文字
      return h('span', validation.message)
    }
  },
  {
    title: '开始时间',
    key: 'startDate',
    width: 120,
    // 简化后的 render 函数，只负责格式化日期
    render: (row) => formatDate(row.startDate) || '未填写'
  },
  {
    title: '结束时间',
    key: 'endDate',
    width: 120,
    // 简化后的 render 函数
    render: (row) => row.endDate ? formatDate(row.endDate) : '至今'
  },
  {
    title: '单位名称',
    key: 'organizationName',
    // 简化后的 render 函数
    render: (row) => row.organizationName || '未填写'
  },
  {
    title: '党支部名称',
    key: 'branchName',
    // 简化后的 render 函数
    render: (row) => row.branchName || '未填写'
  },
  {
    title: '担任职务',
    key: 'positionHeld',
    width: 120,
    render: (row) => row.positionHeld || '无'
  }
]

// 志愿活动表格列定义
const volunteerColumns = [
  { title: '活动日期', key: 'activityDate', width: 150, render: (row) => formatDate(row.activityDate) || '未填写' },
  { title: '活动名称', key: 'activityName' },
  { title: '表现情况', key: 'performanceDesc' }
]

// 获奖情况表格列定义
const awardColumns = [
  { title: '获奖日期', key: 'awardDate', width: 150, render: (row) => formatDate(row.awardDate) || '未填写' },
  { title: '奖项名称', key: 'awardName' },
  { title: '颁发单位', key: 'issuingAuthority' }
]
</script>

<style scoped>
/* 为了让 flex 生效，需要给内容区一些空间 */
.custom-descriptions :deep(.n-descriptions-item-content) {
  display: flex;
  align-items: center;
  padding: 12px 16px;
}

.custom-descriptions :deep(.n-descriptions-item-label) {
  padding: 12px 16px;
  font-weight: 500;
}

.custom-table :deep(.n-data-table-th) {
  background-color: #fafafa;
  font-weight: 600;
}

.custom-table :deep(.n-data-table-tr:hover) {
  background-color: #f8f9fa;
}

.space-y-8 > * + * {
  margin-top: 2rem;
}
</style>